<template>
    <view class="promotion-page">
        <!-- 推广人头像 -->
        <view class="promoter-info">
            <!-- <image :src="promoterAvatar" mode="aspectFill" class="avatar"></image>
            <text class= "promoter-label">推广人</text>-->
        </view>
        <!-- 推广码 -->
        <view class="promotion-code-info">
           <!-- <text class="code-label">推广昵称:</text>
            <text class="code-value">{{ userInfo.nickname }}</text> -->
        </view>
        <!-- 推广二维码 -->
        <view class="qrcode-container">
            <canvas canvas-id="qrcodeCanvas" class="qrcode-canvas"></canvas>
            <text class="qrcode-label">扫描二维码进行推广</text>
        </view>
    </view>
</template>

<script>
import QRCode from 'qrcode-generator';
import {USER_INFO,UID} from '@/config/cache';
import Cache from '@/utils/cache';

export default {
    data() {
        return {
            promoterAvatar: 'https://via.placeholder.com/100',
            promotionCode: 'ABC123',
            qrData: { id: '123' },
			userInfo:{}
        };
    },
    onReady() {
		//登录用户信息
		this.userInfo = Cache.get(USER_INFO,true);;
		console.log(Cache.get(UID,true))
		this.userInfo.id = Cache.get(UID,true)
		this.promoterAvatar = this.userInfo.avatar
		console.log(this.userInfo)
		//二维码数据
		this.qrData = {
			id:this.userInfo.id
			
		}
        this.generateQRCode();
		
    },
    methods: {
        generateQRCode() {
            const qrDataString = JSON.stringify(this.qrData);
            const qr = QRCode(0, 'L');
            qr.addData(qrDataString);
            qr.make();

            const cellSize = 8;
            const margin = 10;
            const qrSize = qr.getModuleCount();
            const canvasSize = qrSize * cellSize + margin * 2;

            const ctx = uni.createCanvasContext('qrcodeCanvas', this);
            ctx.setFillStyle('#ffffff');
            ctx.fillRect(0, 0, canvasSize, canvasSize);

            for (let row = 0; row < qrSize; row++) {
                for (let col = 0; col < qrSize; col++) {
                    if (qr.isDark(row, col)) {
                        ctx.setFillStyle('#000000');
                        ctx.fillRect(col * cellSize + margin, row * cellSize + margin, cellSize, cellSize);
                    }
                }
            }
            ctx.draw();
        }
    }
};
</script>

<style scoped>
.promotion-page {
	min-height: 800px;
    padding: 30px;
	width: 100%;
    text-align: center;
    background-color: #FFF;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/manxin/ggbg.jpg);
	background-size: 100% 100%;
}

.promoter-info {
    margin-bottom: 30px;
}

.avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px solid #ccc;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.promoter-label {
    display: block;
    margin-top: 10px;
    color: #666;
    font-size: 14px;
}

.promotion-code-info {
    margin-bottom: 30px;
}

.code-label {
    font-size: 16px;
    color: #333;
    margin-right: 10px;
	
}

.code-value {
    font-size: 20px;
    font-weight: bold;
    color: #007bff;
}

.qrcode-container {
    margin-top: 20px;
	padding-top: 60%;
}

.qrcode-canvas {
    width: 200px;
    height: 200px;
/*    border: 1px solid #eee;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
    margin: 0 auto;
}

.qrcode-label {
	display: block;
	/* margin-top: 15px; */
	color: #f5f0f0;
	font-size: 16px;
	font-weight: 700;
	margin-top: -6px;
}
</style>